這章要來介紹 Margin Border Padding，框框三兄弟的Border 的部分。

Border

各個物件都有一個框，那就是border。以border為界，外面的空間是margin，與內容之間的空間是padding。
Border因為是實際存在的一個框，所以可以對他進行各種形狀的設計，border也跟他其他兄弟一樣可以分別控制四邊。
border:#000000 solid 1px;
border可以將顏色、款式與粗細縮寫在同一行，其中solid代表實線，有虛線dash、點點dot 等等可以替換，製造多種可能。
border-bottom:#cccccc solid 1px
也可以只使用單邊的border，除了可以當底線之外，也可以利用空的div當作分隔線。

border-radius:5px;
border-radius: 12px 0px;

讓border導圓角，使他看起來不會那麼銳利，也可以做成膠囊型的樣子，符合很多扁平化的設計，但銳利也不是不好，比較適用在一些有關時尚的地方。
也可以將border的各個角落分別設定不同的圓角數值做成氣泡的感覺。

透過border與background-color的配合，就能讓文字或是按鈕在使用者滑鼠滑過去的時候進行變化，做一些小動畫，增加網頁的互動感。

下一章 Position

※本文章所使用之圖片皆為本人作品，內容則為本人之經驗分享